import { computed, defineComponent, ref, Transition } from "vue";
import styles from "../style/index.module.scss";

export default defineComponent({
  props: {
    type: {
      type: String,
      default: "info",
    },
    message: {
      type: String,
      default: "",
    },
    icon: {
      type: String,
      default: "",
    },
    duration: {
      type: Number,
      default: 3000,
    },
  },


  setup(props, { slots, expose }) {
    
    let visible = ref(false); //显示隐藏message
    let timer: number | null | undefined = null;//防抖
    let top = ref(0) //距离顶部的高度

    const setVisible = (value: boolean) => {
      return new Promise((resolve) => {
        visible.value = value;
        timer = setTimeout(() => {
          clearTimeout(timer as any);
          timer = null;
          resolve("");
        }, 300);
      });
    };

    //设置消息的高度
    const setTop = (hei:number)=>{
      top.value = hei
    }

    expose({
      setVisible,
      setTop,
      height:40,
      margin:20
    });

    return () => (
      <>
        <Transition
          enterFromClass={styles.fade_enter_from}
          enterActiveClass={styles.fade_enter_active}
          leaveToClass={styles.fade_leave_to}
          leaveActiveClass={styles.fade_leave_active}
        >
          <div
            v-show={visible.value}
            class={[styles.messStyle, styles[props.type]]}
            style={{top:top.value+'px'}}
          >
            {slots.default ? slots.default?.() : props.message}
          </div>
        </Transition>
      </>
    );
  },
});
